<template>
  <div class="wrapper">
    <!-- 标头部分 -->
    <header class="header">
      <p>
        <span>数据评价监控</span><i @click="jumpDataErr">容错数据管理</i>
        <i @click="jumpDataTrend">数据态势页面跳转</i>
      </p>
    </header>
    <main>
      <!-- 下拉选框部分 -->
      <div class="selectContainer">
        <div class="selectContainer-item">
          <span class="selectContainer-title">业务表</span>
          <div class="showTabList">
            <el-tag
              v-for="(item, index) in value.slice(0, 5)"
              :key="index + item"
              >{{ item.label }}</el-tag
            >
            <el-tag v-show="value.length > 5">+{{ value.length - 5 }}</el-tag>
          </div>
        </div>
        <div class="selectContainer-item">
          <span class="selectContainer-title">日期</span>
          <el-date-picker
            value-format="yyyy-MM-dd"
            v-model="dateValue"
            type="date"
            placeholder="选择日期"
            size="middle"
            @change="selectTime"
          >
          </el-date-picker>
        </div>
        <div class="selectContainer-item selectContainer-item-other">
          <!--<el-button type="plain" @click="isShowDialogFn(true)">配置</el-button>-->
          <!-- <el-button type="plain" @click="jumpConfig">配置</el-button> -->
        </div>
      </div>
      <!-- echart图表部分 -->
      <div class="dataChart">
        <div id="dataContribution"></div>
        <!-- <div id="metadataStatistics"></div> -->
        <div id="includedDataStatistics" ref="includedDataStatistics"></div>
        <div id="dataDetection"></div>
      </div>
      <!-- table表格 -->
      <div class="tableSection">
        <el-table
          :data="tableData"
          style="width: 100%"
          height="420"
          :header-cell-style="{ background: '#EDEDED', color: '#000000' }"
        >
          <el-table-column
            label="序号"
            type="index"
            :index="indexMethod"
            width="80"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="date" label="日期" width="200" align="center">
          </el-table-column>
          <el-table-column prop="resourceName" label="资源名称" align="center">
          </el-table-column>
          <el-table-column prop="tableName" label="对象名称" align="center">
          </el-table-column>
          <el-table-column
            prop="dataNum"
            label="当日贡献数据量(条)"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="updateFrequency"
            label="当日更新频次"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="dataQuality" label="数据质量" align="center">
          </el-table-column>
        </el-table>
        <div>
          <div class="pagination">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageConfig.currentPage"
              :page-sizes="pageConfig.pageSizes"
              :page-size="pageConfig.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageConfig.total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
      <!-- 配置弹窗 -->
      <el-dialog
        title="配置设置"
        :visible.sync="settingFlag"
        width="35%"
        top="25vh"
        :center="true"
        :show-close="false"
        custom-class="setting-wrap"
      >
        <div class="setting">
          <div class="setting-tabs">
            <div class="setting-title">业务表配置</div>
            <el-tree
              :data="treeValue"
              show-checkbox
              node-key="id"
              ref="tree"
              highlight-current
              :props="defaultProps"
              @check="changeTreeDataFn"
              :default-checked-keys="defaultTreeArray"
            >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
                <span
                  v-if="node.label !== '业务表'"
                  class="custom-tree-node-right"
                >
                  <el-button
                    type="text"
                    size="mini"
                    @click="() => deleteData(node, data)"
                  >
                    删除
                  </el-button>
                </span>
              </span>
            </el-tree>
          </div>

          <div class="setting-btns">
            <el-button type="danger" @click="isShowDialogFn(false)"
              >取消</el-button
            >
            <el-button type="primary" @click="traggerTable">配置</el-button>
            <el-button type="primary" @click="innerVisible = true"
              >添加数据</el-button
            >
          </div>
        </div>
        <el-dialog
          width="35%"
          top="25vh"
          title="添加数据"
          :visible.sync="innerVisible"
          append-to-body
          :center="true"
          custom-class="setting-wrap"
        >
          <el-form label-width="80px" :model="formLabelAlign" ref="form">
            <el-form-item label="对象名称">
              <el-input v-model="formLabelAlign.name"></el-input>
            </el-form-item>
            <el-form-item label="资源名称">
              <el-input v-model="formLabelAlign.resources"></el-input>
            </el-form-item>
            <el-form-item label="阈值">
              <el-input v-model="formLabelAlign.threshold"></el-input>
            </el-form-item>
            <el-button type="success" @click="insterDate">提交</el-button>
          </el-form>
        </el-dialog>
      </el-dialog>
    </main>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "dataEvaluationMonitoring",
  components: {},
  data() {
    return {
      dateValue: "",
      tableData: [],
      value: [],
      treeValue: [{ id: "业务表", label: "业务表", children: null }],
      defaultProps: {
        children: "children",
        label: "label",
        id: "id",
      },
      defaultTreeArray: [],
      pageConfig: {
        currentPage: 1,
        pageSizes: [5, 10, 20, 50, 100, 200],
        pageSize: 5,
        total: null,
      },
      dataContributionChart: null, //数据贡献量图表
      updateFrequencyChart: null, //数据更新频度
      dataDetectionChart: null, //表级质量图表
      settingFlag: false, //配置弹窗的falg
      checkoutyewuTabs: [], //配置弹窗中的勾选项
      innerVisible: false,
      formLabelAlign: { name: "", resources: "", threshold: "" },
      valueList: [],
    };
  },
  created() {
    //this.$bus.$on('inConfig',(val)=>{
    //  console.log('事件跳转数据',val)
    //  console.log('参数跳转数据',this.$route.query.value)
    //  console.log('this',this)
    //  //this.value = this.$route.query.value;
    //  this.value = val

    //})

    //console.log(this.$route.query.value)
    //if(this.$route.query.value !==undefined&&this.$route.query.value.length !==0){
    //  console.log(this.$store.state.app.zongValue)
    //  this.value = this.$store.state.app.zongValue;
    //  this.getTableData();
    //  this.getChartData();
    //  //console.log('if内执行',this.$route.query.value)
    //}
    this.dateValue = this.$store.state.app.dateValue;
    if (
      this.$store.state.app.zongValue[0] !== "" &&
      this.$store.state.app.zongValue.length !== 0
    ) {
      this.value = this.$store.state.app.zongValue;
      this.getTableData();
      this.getChartData();
    }

    //console.log('if外执行',typeof this.$route.query.value)
  },
  watch: {
    dateValue(newV, oldV) {
      if (
        this.$store.state.app.zongValue[0] !== "" &&
        this.$store.state.app.zongValue.length !== 0
      ) {
        this.getTableData();
        this.getChartData();
      }
    },
  },
  mounted() {
    let tokens = sessionStorage.getItem("Authorization");
    if (!tokens) {
      axios.post("/cas/jwt/token.do").then((res) => {
        if (res && res.status === 200) {
          let tokens = res.data.returnInfo;
          sessionStorage.setItem("Authorization", tokens);
          this.getBusinessTable();
        }
      });
    } else {
      if (
        this.$store.state.app.zongValue[0] === "" ||
        this.$store.state.app.zongValue.length === 0
      ) {
        this.getBusinessTable();
      }
      // this.getBusinessTable();
    }

    //let tokens = sessionStorage.getItem("Authorization");
    //if (!tokens) {
    //  this.getBusinessTable();
    //  axios.post("/cas/jwt/token.do").then((res) => {
    //    if (res && res.status == 200) {
    //      let tokens = res.data.returnInfo;
    //      sessionStorage.setItem("Authorization", tokens);
    //      this.getBusinessTable();
    //    }
    //  });
    //} else {
    //  this.getBusinessTable();
    //}
    //if(this.$route.query.value ===undefined||typeof this.$route.query.value[0]==="string"||this.$route.query.value.length ===0){
    //  this.getBusinessTable();
    //}

    // 默认显示当前时间
    // this.formatTimeMS(new Date().getTime());

    // if (
    //   this.$store.state.app.zongValue[0] === "" ||
    //   this.$store.state.app.zongValue.length === 0
    // ) {
    //   this.getBusinessTable();
    // }

    window.addEventListener("resize", () => {
      this.dataContributionChart.resize();
      this.updateFrequencyChart.resize();
      this.dataDetectionChart.resize();
    });
  },
  methods: {
    // 获取日期
    selectTime(value1) {
      this.dateValue = value1;
      this.$store.commit("setDateValue", this.dateValue);
    },
    //通过总线获取数去给this.value
    getBusValue(val) {
      this.value = val;
    },
    //表格阈值变红方法
    rowStyle({ row }) {
      let nowDate = new Date().getTime();
      let oldDate = new Date(row.dateUpdate).getTime();
      let num = Math.floor((nowDate - oldDate) / 86400000);
      if (num >= row.thresholdValue) {
        return "color:red;";
      }
      return "";
    },
    // 获取图表数据
    getChartData() {
      let dataTime = this.dateValue ? this.dateValue : "";
      axios
        .get(
          //`/monitor/selectedTableName?tableNames=${this.value}&time=${dataTime}`
          `/monitor/selectedTableName?tableNames=${this.value.map((item) => {
            return item.label;
          })}&time=${dataTime}`
        )
        .then((res) => {
          console.log(res);
          if (res && res.status === 200) {
            let newDataContribution = [];
            let xAxisData = [];
            let seriesData = [];
            let xAxisQualityData = [];
            let seriesQualityData = [];
            res.data.data.forEach((item) => {
              xAxisQualityData.push(item.tableName);
              seriesQualityData.push(parseFloat(item.dataQuality));
              xAxisData.push(item.tableName);
              seriesData.push(parseFloat(item.updateFrequency));
              newDataContribution.push({
                value: item.dataContribution,
                name: item.tableName,
              });
            });
            let dataContributionOption = {
              tooltip: {
                trigger: "item",
              },
              legend: {
                orient: "vertical",
                top: 50,
                right: 10,
                formatter: function (val) {
                  let length = val.length;
                  if (length > 13) {
                    let ret = "";
                    let rowN = Math.ceil(length / 13);
                    for (let i = 0; i < rowN; i++) {
                      let ret2 = "";
                      ret2 = val.substring(13 * i, 13 * (i + 1)) + "\n";
                      ret = ret + ret2;
                    }

                    return ret;
                  } else {
                    return val;
                  }
                },
              },
              title: {
                text: "数据贡献度",
                left: "left",
              },
              series: [
                {
                  name: "访问来源",
                  type: "pie",
                  radius: ["40%", "70%"],
                  center: ["35%", "45%"],
                  avoidLabelOverlap: false,
                  itemStyle: {
                    borderRadius: 10,
                    borderColor: "#fff",
                    borderWidth: 2,
                  },
                  label: {
                    show: false,
                    position: "center",
                  },
                  emphasis: {
                    label: {
                      show: true,
                      fontSize: "20",
                      fontWeight: "bold",
                    },
                  },
                  labelLine: {
                    show: false,
                  },
                  data: newDataContribution,
                  left: "10",
                },
              ],
            };
            let includedDataStatisticsOption = {
              tooltip: {
                trigger: "item",
              },
              grid: {
                top: 45,
                //left:28,
                //right:20,
                bottom: 90,
              },
              xAxis: {
                type: "category",
                data: xAxisData,
                axisLabel: {
                  interval: 0,
                  rotate: 50,
                  lineHeight: 10,
                  formatter: function (val) {
                    let length = val.length;
                    if (length > 10) {
                      let ret = "";
                      let rowN = Math.ceil(length / 10);
                      for (let i = 0; i < rowN; i++) {
                        let ret2 = "";
                        ret2 = val.substring(10 * i, 10 * (i + 1)) + "\n";
                        ret = ret + ret2;
                      }

                      return ret;
                    } else {
                      return val;
                    }
                  },
                },
              },
              yAxis: {
                type: "value",
              },
              title: {
                text: "更新频度",
                left: "left",
              },
              series: [
                {
                  data: seriesData,
                  type: "bar",
                  showBackground: true,
                },
              ],
            };
            let sheetQualityOption = {
              tooltip: {
                trigger: "item",
              },
              grid: {
                top: 45,
                //left:28,
                //right:20,
                bottom: 90,
              },
              xAxis: {
                type: "category",
                data: xAxisQualityData,
                axisLabel: {
                  interval: 0,
                  rotate: 50,
                  lineHeight: 10,
                  //formattter:function(value){
                  //  return value+'nihao'
                  //  //let ret = '';
                  //  //let maxLength = 10;
                  //  //let valLength = value.length;
                  //  //console.log(value.length)
                  //  //let rowN = Math.ceil(valLength/maxLength)
                  //  //if(rowN>1){
                  //  //  for(let i = 0;i<rowN;i++){
                  //  //    let temp = '';
                  //  //    let start = i * maxLength;
                  //  //    let end = start + maxLength;
                  //  //    temp = value.substring(start,end)+'\n';
                  //  //    ret +=temp;
                  //  //  }
                  //  //  return ret;
                  //  //}else{
                  //  //  return value;
                  //  //}
                  //}
                  formatter: function (val) {
                    let length = val.length;
                    if (length > 10) {
                      let ret = "";
                      let rowN = Math.ceil(length / 10);
                      for (let i = 0; i < rowN; i++) {
                        let ret2 = "";
                        ret2 = val.substring(10 * i, 10 * (i + 1)) + "\n";
                        ret = ret + ret2;
                      }

                      return ret;
                    } else {
                      return val;
                    }
                  },
                },
              },
              yAxis: {
                type: "value",
              },
              title: {
                text: "表级质量",
                left: "left",
              },
              series: [
                {
                  data: seriesQualityData,
                  type: "bar",
                  showBackground: true,
                },
              ],
            };
            this.getDataDetection(sheetQualityOption);
            this.getIncludedDataStatistics(includedDataStatisticsOption);
            this.getDataContribution(dataContributionOption);
          }
        });
    },
    // 每页条数变化处理函数
    handleSizeChange(val) {
      this.pageConfig.pageSize = val;
      this.getTableData();
    },
    // 当前页码变化处理函数
    handleCurrentChange(val) {
      this.pageConfig.currentPage = val;
      this.getTableData();
    },
    // 打开配置弹窗
    isShowDialogFn(flag) {
      this.settingFlag = flag;
    },
    //配置获取表格内容
    traggerTable() {
      this.isShowDialogFn(false);
      this.getTableData();
      this.getChartData();
    },
    // 获取tabel表格数据
    getTableData() {
      let dataTime = this.dateValue ? this.dateValue : "";
      this.valueList = this.value.map((item) => {
        return item.label;
      });
      axios
        .get(
          //`/monitor/selectedTableMessage?tableNames=${this.value}&time=${dataTime}&pageNum=${this.pageConfig.currentPage}&pageSize=${this.pageConfig.pageSize}`
          `/monitor/selectedTableMessage?tableNames=${this.valueList}&time=${dataTime}&pageNum=${this.pageConfig.currentPage}&pageSize=${this.pageConfig.pageSize}`
        )
        .then((res) => {
          if (res && res.status === 200) {
            this.tableData = res.data.content;
            this.pageConfig.total = res.data.totalSize;
          }
        });
    },
    // 序号
    indexMethod(index) {
      let currentPageNum = this.pageConfig.currentPage - 1;
      let currentPageSize = this.pageConfig.pageSize;
      let num = currentPageNum * currentPageSize + (index + 1);
      return num;
    },
    // 实时获取tree中的data数据选中状态
    changeTreeDataFn(treeItem, treeAll) {
      let checkoutValue = treeAll.checkedNodes.map((item) => {
        //return item.label;
        return { label: item.label, id: item.id };
      });
      checkoutValue = checkoutValue.filter((item) => {
        //return item !== "业务表";
        return item.label !== "业务表";
      });
      this.value = checkoutValue;
    },
    //获取业务表
    getBusinessTable() {
      axios.get("/monitor/getAllTableName").then((res) => {
        // axios.get("http://172.16.83.111:8888/monitor/getAllTableName").then((res) => {
        if (res && res.status === 200) {
          let treeValue = [];
          //console.log("第一次请求", res);
          treeValue = res.data.map((item, index) => {
            return { id: item.id, label: item.tableName };
          });
          let value = JSON.parse(JSON.stringify(treeValue));
          //let value = treeValue;
          this.value = value.splice(0, 5);
          this.$store.commit("setZongValue", this.value);
          this.treeValue[0].children = treeValue;
          //this.defaultTreeArray = JSON.parse(
          //  JSON.stringify(
          //    this.value.map((item) => {
          //      return item.id;
          //    })
          //  )
          //);
          this.defaultTreeArray = this.value.map((item) => {
            return item.id;
          });
          this.getTableData();
          this.getChartData();
        }
      });
    },
    //获取数据量
    getDataNum() {
      axios
        .get("/monitor/getDataNum", { params: { tableName: "test" } })
        .then((res) => {
          if (res && res.status === 200) {
            let newDataContribution = [];
            res.data.data.forEach((item) => {
              newDataContribution.push({
                value: item.dataContribution,
                name: item.tableName,
              });
            });
            let option = {
              tooltip: {
                trigger: "item",
              },
              legend: {
                orient: "vertical",
                top: 50,
                right: 10,
              },
              title: {
                text: "数据贡献度",
                left: "left",
              },
              series: [
                {
                  name: "访问来源",
                  type: "pie",
                  radius: ["40%", "70%"],
                  avoidLabelOverlap: false,
                  itemStyle: {
                    borderRadius: 10,
                    borderColor: "#fff",
                    borderWidth: 2,
                  },
                  label: {
                    show: false,
                    position: "center",
                  },
                  emphasis: {
                    label: {
                      show: true,
                      fontSize: "20",
                      fontWeight: "bold",
                    },
                  },
                  labelLine: {
                    show: false,
                  },
                  data: newDataContribution,
                },
              ],
            };
            this.getDataContribution(option);
          }
        });
    },
    //获取更新频度
    getUpdateFrequency() {
      axios
        .get("/monitor/getUpdateFrequency", {
          params: { tableName: "test" },
        })
        .then((res) => {
          if (res && res.status === 200) {
            let xAxisData = [];
            let seriesData = [];
            res.data.data.forEach((item) => {
              xAxisData.push(item.tableName);
              seriesData.push(parseFloat(item.updateFrequency));
            });
            let option = {
              tooltip: {
                trigger: "item",
              },
              xAxis: {
                type: "category",
                data: xAxisData,
              },
              yAxis: {
                type: "value",
              },
              title: {
                text: "更新频度",
                left: "left",
              },
              series: [
                {
                  data: seriesData,
                  type: "bar",
                  showBackground: true,
                },
              ],
            };
            this.getIncludedDataStatistics(option);
          }
        });
    },
    //获取表级质量
    getDataQuality() {
      axios
        .get("/monitor/getDataQuality", { params: { tableName: "test" } })
        .then((res) => {
          if (res && res.status === 200) {
            let xAxisData = [];
            let seriesData = [];
            res.data.data.forEach((item) => {
              xAxisData.push(item.tableName);
              seriesData.push(parseFloat(item.dataQuality));
            });
            let option = {
              tooltip: {
                trigger: "item",
              },
              xAxis: {
                type: "category",
                data: xAxisData,
              },
              yAxis: {
                type: "value",
              },
              title: {
                text: "表级质量",
                left: "left",
              },
              series: [
                {
                  data: seriesData,
                  type: "bar",
                  showBackground: true,
                },
              ],
            };
            this.getDataDetection(option);
          }
        });
    },
    //数据量图表绘制
    getDataContribution(option) {
      let chartDom = document.getElementById("dataContribution");
      this.dataContributionChart = this.$echarts.init(chartDom);
      this.dataContributionChart.setOption(option);
    },
    //更新频度图表绘制
    getIncludedDataStatistics(option) {
      let chartDom = document.getElementById("includedDataStatistics");
      this.updateFrequencyChart = this.$echarts.init(chartDom);
      this.updateFrequencyChart.setOption(option);
    },
    // 表级质量图表绘制
    getDataDetection(option) {
      let chartDom = document.getElementById("dataDetection");
      this.dataDetectionChart = this.$echarts.init(chartDom);
      this.dataDetectionChart.setOption(option);
    },
    //数据态势页面跳转
    jumpDataTrend() {
      this.$router.push("/dataTrend");
      //this.$router.push({
      //  path:'/dataTrend',
      //  query:{valueList:this.value}
      //})
    },
    // 容错数据管理
    jumpDataErr() {
      this.$router.push("/statistics");
      // this.$router.push({
      //   path: "/dataTrend",
      //   query: { valueList: this.value },
      // });
    },
    //提交监控对象表数据
    insterDate() {
      if (
        this.formLabelAlign.name !== "" &&
        this.formLabelAlign.resources !== "" &&
        this.formLabelAlign.threshold !== "" &&
        this.innerVisible === true
      ) {
        this.innerVisible = false;
        axios
          .post("/monitor/addTableMessage", {
            tableName: this.formLabelAlign.name,
            resourceName: this.formLabelAlign.resources,
            thresholdValue: this.formLabelAlign.threshold,
          })
          .then(() => {
            axios.get("/monitor/getAllTableName").then((res) => {
              //console.log("第二次请求", res);
              let sum = 0;
              res.data.forEach((item) => {
                sum = item.id > sum ? item.id : sum;
              });
              let newChild = {
                id: sum,
                label: this.formLabelAlign.name,
                children: [],
              };
              this.treeValue[0].children.push(newChild);
            });
          });
      }
    },
    //删除监控对象表数据
    deleteData(node, data) {
      //2.删除库中节点
      axios.get(`/monitor/delTableMessage?id=${data.id}`).then((res) => {
        if (res.data === "删除成功") {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          //1.删除tree节点
          const parent = node.parent;
          const children = parent.data.children || parent.data;
          const index = children.findIndex((d) => d.id === data.id);
          children.splice(index, 1);
          this.value = this.value.filter((item) => {
            return item.id !== data.id;
          });
        } else if (res.data === "接口表数据，无法删除") {
          this.$message({
            message: "无法删除",
            type: "error",
          });
        }
      });
      //3.重新获取图表数据
      this.getTableData();
      this.getChartData();
    },
    //跳转配置页面
    jumpConfig() {
      //this.$router.push({
      //  path: "/emconfig",
      //  query: { treeValue: this.treeValue },
      //});
      this.$router.push("/emconfig");
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 60px;
  background: #2b2b2b;
  opacity: 1;
  line-height: 60px;
  p {
    margin-left: 36px;
    color: white;
    font-size: 16px;
    i {
      display: block;
      margin-right: 30px;
      font-style: normal;
      color: #909399;
      cursor: pointer;
      float: right;
    }
  }
}
main {
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 30px;
  .selectContainer {
    height: 80px;
    line-height: 80px;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    align-items: center;
    position: relative;
    .selectContainer-item {
      display: flex;
      height: 100%;
      align-items: center;
      margin-left: 50px;
      &:first-child {
        margin-left: 0;
      }
      ::v-deep .showTabList {
        font-size: 20px;
        display: flex;
        align-items: center;
        .el-tag {
          margin-left: 8px;
          &:first-child {
            margin-left: 0;
          }
        }
      }
      .selectContainer-title {
        flex: 0 0 auto;
        font-size: 20px;
        color: #000;
        margin-right: 15px;
        opacity: 0.4;
      }
      .btnwrapper {
        float: right;
        ::v-deep .el-button {
          color: #000000;
          font-size: 18px;
        }
      }
      &.selectContainer-item-other {
        position: absolute;
        right: 20px;
        top: 0;
        bottom: 0;
      }
    }
  }
  .dataChart {
    margin-top: 20px;
    padding: 20px;
    box-sizing: border-box;
    border: dashed 1px #707070;
    height: 350px;
    border-radius: 5px;
    display: flex;
    justify-content: space-around;
    #dataContribution {
      width: 30%;
      height: 100%;
    }
    #includedDataStatistics {
      width: 30%;
      height: 100%;
    }
    #dataDetection {
      width: 30%;
      height: 100%;
    }
  }
  .tableSection {
    margin-top: 30px;
    height: 490px;
    border: dashed 1px #707070;
    padding: 15px 20px 10px 20px;
    position: relative;
    .pagination {
      position: absolute;
      bottom: 30px;
      right: 30px;
    }
  }
}
::v-deep .setting-wrap {
  .el-dialog__header {
    padding-top: 20px;
    .el-dialog__title {
      font-size: 24px;
      line-height: 30px;
    }
  }
  .el-dialog__body {
    padding-top: 0;
    padding-bottom: 30px;
    .el-form {
      text-align: center;
    }
  }
  .setting {
    display: flex;
    flex-direction: column;
    align-items: center;
    .setting-tabs {
      width: 100%;
      margin-bottom: 20px;
      .setting-title {
        font-size: 20px;
        line-height: 30px;
        margin-bottom: 20px;
      }
      .el-checkbox-group {
        display: flex;
        flex-wrap: wrap;
        .el-checkbox__label {
          font-size: 16px;
        }
        .el-checkbox.is-bordered + .el-checkbox.is-bordered {
          margin-left: 0;
        }
        .el-checkbox {
          margin-right: 20px;
          margin-bottom: 15px;
        }
      }
    }
    .setting-btns {
      width: 50%;
      display: flex;
      justify-content: space-between;
      .el-button {
        font-size: 18px;
        padding: 12px 10px;
      }
    }
  }
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
